<template>
	<view :style="{ paddingTop: safeAreaTop + 'px' }">
		<up-navbar :title="'新建'+pageTitle+'合图'" :autoBack="true" />
		<view class="content flex-c a-c j-c">
			<text v-if="pageTitle!='双人'">{{pageTitle}}Penta合图最低选择3人</text>
			<view class="choose mt-2">选择档案1</view>
			<view class="choose mt-2">选择档案2</view>
			<view class="choose mt-2" v-if="pageTitle!='双人'">选择档案3</view>
			<view class="choose mt-2" v-if="pageTitle!='双人'">选择档案4</view>
			<view class="choose mt-2" v-if="pageTitle!='双人'">选择档案5</view>
			<button :class="{'submit-default':true, 'submit-active':false}">创建合图</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		pageTitle: {
			type: String,
			default: '双人'
		}
	})
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
</script>

<style lang="scss" scoped>
	.content {
		padding: 80rpx;
		text {
			font-weight: 500;
			font-size: 36rpx;
		}

		.choose {
			width: 100%;
			font-weight: 500;
			font-size: 32rpx;
			color: #531F14;
			background: #FFF5DE;
			border-radius: 8rpx;
			border: 1px solid #FED523;
			text-align: center;
			padding: 24rpx 0;
		}

		.choosed {
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			background: #E8E8E8;
			border-radius: 4px;
			border: 1px solid #531F14;
		}
		.submit-default{
			width: 100%;
			font-weight: 500;
			font-size: 32rpx;
			color: #531F14;
			background: #E8E8E8;
			border-radius: 46rpx;
			margin-top: 100rpx;
		}
		.submit-active{
			color: #FFFFFF;
			background: #FF9281;
		}
	}
</style>